<template>
	<div class="app-container" id="main-content"  :style="{'background':'url('+bg+') no-repeat center'}">
		
		<div class="top-title" :style="{'background':'url('+topbg+') no-repeat center','background-size': '100% 225%','background-position-y':'4px'}">
			<div class="top-name">
				{{ topName }}
			</div>
		</div>
		<div class="top-title1" :style="{'background':'url('+topbgs+') no-repeat center','background-size': '100% 225%','background-position-y':'-8px'}">
		</div>
		<div style="position: absolute;top:0;right:0;z-index: 10000;color:#fff">
			<el-tooltip :content="isFullScreen ? '退出全屏' : '全屏'" placement="bottom">
				<i class="el-icon-full-screen" @click="toggleFullScreen" :type="isFullScreen ? 'md-contract' : 'md-expand'" :color="'#ffffff'" :size="34"></i>
			</el-tooltip>
		</div>
		<local-weather class="tianqi"></local-weather>
		<el-row :gutter="24" style="display: flex">
			<el-row :span="6" :gutter="24" class="top-row top-row-shang" style="flex: 1;">
				<el-col :span="24" class="top-col">
					<div class="top-row-content bg-purple">
						<div class="content-name" :style="{'background':'url('+topTitlebg+') no-repeat','background-size': '100%','background-position-x':' -1.8vw'}">
							<div class="content-name-s">
								各院系成绩合格率
							</div>
						</div>
						<div class="content-chart"
						     style="height: 100%;"
						     v-loading="loading"
						     element-loading-text="拼命加载中"
						     element-loading-spinner="el-icon-loading"
						     element-loading-background="rgba(0, 0, 0, 0.8)">
							<!--							<chart-item :index="1" :option='chartdataPie'></chart-item>-->
							<chart-item
								:index="100"
								v-if="weightDataX.length>0"
								ref="visitHegelvChart"
								:endSize="endSize"   :liudong="true"
								:chart-data="hegelvData"
								style="height: 100%;"
								:option="hegulvChartOption"/>
						</div>
					</div>
				</el-col>
				<el-col :span="24" class="top-col">
					<div class="top-row-content bg-purple">
						<div class="content-name" :style="{'background':'url('+topTitlebg+') no-repeat','background-size': '100%','background-position-x':' -1.8vw'}">
							<div class="content-name-s">
								院系各项目运动时长
							</div>
						</div>
						<div class="content-chart"
						     v-loading="loading"
						     element-loading-text="拼命加载中"
						     element-loading-spinner="el-icon-loading"
						     element-loading-background="rgba(0, 0, 0, 0.8)">
							<chart-item :index="23" ref="visittizhongChart"
							            v-if="weightDataX.length>0"
							            style="height: 100%;" :option='yundongShichang'></chart-item>
						
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row  :span="12" :gutter="24" class="top-row  top-row-shang2" style="flex: 2;margin-left:0.1%;margin-right: 0.1%">
				<el-col :span="24" class="" style="margin-top:2%; margin-bottom: 1.5%;display: flex;flex-wrap: nowrap;align-items: center">
					<div class="paiming_title">体测排名</div>
					<el-form ref="schoolForm" :inline="true" :model="schoolForm">
						<el-form-item label="体测名称">
							<el-select
								filterable
								clearable
								v-model="schoolForm.taskId"
								@change="getChartData"
								size="small"
								placeholder="-体测名称-"
								class="ele-block">
								<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"/>
							</el-select>
						</el-form-item>
						<el-form-item label="年级">
							<el-select
								filterable
								clearable
								v-model="schoolForm.gradeId"
								size="small"
								@change="getChartData"
								placeholder="-请选择年级-"
								class="ele-fluid">
								<el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id"/>
							</el-select>
						</el-form-item>
						<el-form-item label="学院">
							<el-select
								filterable
								clearable
								v-model="schoolForm.departmentId"
								size="small"
								@change="getChartData"
								placeholder="-请选择学院-"
								class="ele-fluid">
								<el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
							</el-select>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="24" class="top-col" style=" margin-bottom: 1.5%;"
				        v-loading="loading"
				        element-loading-text="拼命加载中"
				        element-loading-spinner="el-icon-loading"
				        element-loading-background="rgba(0, 0, 0, 0.8)">
					<gundong-table :activeFactoryId="activeFactoryId" v-if="weightDataX.length>0" :table-list="tableList" @tianchongTable="tianchongTable"></gundong-table>
				
				</el-col>
			</el-row>
			<el-row :span="6" :gutter="24" class="top-row  top-row-shang" style="flex: 1;margin-top: 0.5vh!important">
				<el-col :span="24" class="">
					<el-row :span="24" :gutter="4" class="top-tag" style="flex: 1;display:flex">
						<el-col :span="6">
							<div class="grid-content bg-purple xiaoshi5">
								<div class="tag-name">学校总人数</div>
								<div class="tag-num">{{analysisData.man_num+analysisData.women_num}}</div>
								<div class="tag-subtitle">
									<div class="tag-point">男生 {{ analysisData.man_num }}</div>
									<div class="tag-point">女生 {{ analysisData.women_num }}</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple xiaoshi10">
								<div class="tag-name">参与人数</div>
								<div class="tag-num">{{ analysisData.canyu_num }}</div>
								<div class="tag-subtitle" style="justify-content: center">
									<div class="tag-point">参与率 {{ analysisData.canyu_rate }}</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple xiaoshi13">
								<div class="tag-name">合格率</div>
								<div class="tag-num">{{ analysisData.hege_rate }}</div>
								<div class="tag-subtitle" style="justify-content: center">
									<div class="tag-point">合格人数 {{ analysisData.hege_num }}</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6">
							<div class="grid-content bg-purple xiaoshi14">
								<div class="tag-name">平均分</div>
								<div class="tag-num">{{ analysisData.avg_num }}</div>
								<div class="tag-subtitle">
									<div class="tag-point">最高分 {{ analysisData.max_avg }}</div>
									<div class="tag-point">最低分 {{ analysisData.mix_avg }}</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="24" class="top-col">
					<div class="top-row-content top-row-content-two-teshu bg-purple">
						<div class="content-name" :style="{'background':'url('+topTitlebg+') no-repeat','background-size': '100%','background-position-x':' -1.8vw'}">
							<div class="content-name-s">
								实时体育监测
							</div>
						</div>
						<el-row :gutter="24" class="top-row" style="width: 100%;height: 86%;display: flex;flex-direction: row"
						        v-loading="loading"
						        element-loading-text="拼命加载中"
						        element-loading-spinner="el-icon-loading"
						        element-loading-background="rgba(0, 0, 0, 0.8)">
							<el-col :span="12" class="top-col">
								<div class="content-chart xuanzhuan">
									<!--							<chart-item :index="1" :option='chartdataPie'></chart-item>-->
									<chart-item
										v-if="weightDataX.length>0"
										:index="117"
										ref="visittizhongChart"
										style="height: 100%;"
										:option="yuanxiyouxiulv"/>
								</div>
							</el-col>
							<el-col :span="12" class="top-col">
								<div class="content-chart xuanzhuan2">
									<chart-item
										v-if="weightDataX.length>0"
										:index="199"
										ref="visittizhongChart"
										style="height: 100%;"
										:option="yuanxilianghaolv"/>
								</div>
							</el-col>
							<el-col :span="12" class="top-col">
								<div class="content-chart  xuanzhuan3">
									<chart-item
										v-if="weightDataX.length>0"
										:index="47"
										ref="visittizhongChart"
										style="height: 100%;"
										:option="yuanxihegelv"/>
								</div>
							</el-col>
						</el-row>
					</div>
				</el-col>
				<el-col :span="24" class="top-col">
					<div class="top-row-content bg-purple">
						<div class="content-name" :style="{'background':'url('+topTitlebg+') no-repeat','background-size': '100%','background-position-x':' -1.8vw'}">
							<div class="content-name-s">
								男生各项目平均分与等级
							</div>
						</div>
						<div class="content-chart" v-loading="loading"
						     element-loading-text="拼命加载中"
						     element-loading-spinner="el-icon-loading"
						     element-loading-background="rgba(0, 0, 0, 0.8)">
							<chart-item
								v-if="weightDataX.length>0"
								:index="12"
								:endSize="endSize"   :liudong="true"
								:chart-data="man_levelProjectData[0]"
								ref="visitmanChart"
								style="height: 100%;"
								:option="manClassScoreData"/>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-row>
		<el-row :gutter="24" style="display: flex">
			<el-col :span="12" :gutter="24" class="top-row">
				<div class="top-row-content bg-purple" style="padding: 0;">
					<div class="content-name" :style="{'background':'url('+topTitlebg+') no-repeat','background-size': '50% 180%','background-position-x':' -1.8vw'}">
						<div class="content-name-s">
							身高体重BMI
						</div>
					</div>
					<el-row :gutter="24" class="top-row" style="width: 100%;height: 100%;display: flex;flex-direction: row">
						<el-col :span="12" class="top-col">
							<div class="content-chart" v-loading="loading"
							     element-loading-text="拼命加载中"
							     element-loading-spinner="el-icon-loading"
							     element-loading-background="rgba(0, 0, 0, 0.8)">
								<!--							<chart-item :index="1" :option='chartdataPie'></chart-item>-->
								<chart-item
									v-if="weightDataX.length>0"
									:index="24"
									ref="visittizhongChart"
									:endSize="endSize"   :liudong="true"
									:chart-data="high_weightHdata"
									style="height: 90%;"
									:option="shengaoChartOption"></chart-item>
							</div>
						</el-col>
						<el-col :span="12" class="top-col">
							<div style="width: 100%;display: flex;justify-content: center;margin-top: 5px">
								<el-button-group style="height: 40px;">
									<el-button :type="isall=='0'?'primary':''" size="small" @click="changenannv('0')">全部</el-button>
									<el-button :type="isall=='1'?'primary':''" size="small" @click="changenannv('1')">男生</el-button>
									<el-button :type="isall=='2'?'primary':''" size="small" @click="changenannv('2')">女生</el-button>
								</el-button-group>
							</div>
							<div class="content-chart" v-loading="loading"
							     element-loading-text="拼命加载中"
							     element-loading-spinner="el-icon-loading"
							     element-loading-background="rgba(0, 0, 0, 0.8)">
								<!--							<chart-item :index="1" :option='chartdataPie'></chart-item>-->
								<chart-item :index="26" v-if="weightDataX.length>0"
								            ref="visitHegelvChart"
								            style="height: 90%;"
								            :option="shengaopie"/>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="6" :gutter="24" class="top-row">
				<div class="top-row-content bg-purple" style="padding: 0;">
					<div class="content-name" :style="{'background':'url('+topTitlebg+') no-repeat','background-size': '100%','background-position-x':' -1.8vw'}">
						<div class="content-name-s">
							院系各项目参与率
						</div>
					</div>
					<div class="content-chart" v-loading="loading"
					     element-loading-text="拼命加载中"
					     element-loading-spinner="el-icon-loading"
					     element-loading-background="rgba(0, 0, 0, 0.8)">
						<!--							<chart-item :index="1" :option='chartdataPie'></chart-item>-->
						<chart-item :index="19"
						            v-if="weightDataX.length>0"
						            ref="visitHegelvChart"
						            style="height: 90%;"
						            :option="canyulvChartData"/>
					</div>
				</div>
			</el-col>
			<el-col :span="6" :gutter="24" class="top-row">
				<div class="top-row-content bg-purple" style="padding: 0;">
					<div class="content-name" :style="{'background':'url('+topTitlebg+') no-repeat','background-size': '100%','background-position-x':' -1.8vw'}">
						<div class="content-name-s">
							女生各项目平均分与等级
						</div>
					</div>
					<div class="content-chart" v-loading="loading"
					     element-loading-text="拼命加载中"
					     element-loading-spinner="el-icon-loading"
					     element-loading-background="rgba(0, 0, 0, 0.8)">
						<chartItem
							v-if="weightDataX.length>0"
							:index="10"
							:endSize="endSize"
							:liudong="true"
							:chart-data="woman_levelProjectData[0]"
							ref="visitwomanChart"
							style="height: 90%;"
							:option="womanClassScoreData">
						</chartItem>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import topbg from '@/assets/images/topbg.gif';
import bg from '@/assets/images/bg@2x.png';
import topbgs from '@/assets/images/bgtops.png';
import topTitlebg from '@/assets/images/biaoti@2x.png';
import chartItem from '../../components/Chartdemo/chart.vue'
import gundongTable from '../../components/GundongTable/GundongTable.vue'
import localWeather from '../../components/LocalWeather/LocalWeather.vue'
import {
	getChartData,
	getDepartmentsList,
	getGradesList,
	getProjectsList, getSaishi,
} from "../../api/home";
// import EleChart from 'ele-admin/packages/ele-chart';
export default {
	name      : 'home',
	components: {
		chartItem,
		gundongTable,
		localWeather
	},
	data() {
		return {
			topbg,
			topTitlebg,
			bg,
			topbgs,
			screenWidth  : '',
			screenHeight : '',
			browserKernel: '',
			canFullScreen: false,
			isFullScreen : false,
			topName      : '深圳信息职业技术学院智慧体育平台',
			schoolForm:{
				departmentId:'',
				taskId:'',
				gradeId:'',
				niandu: '',
				type: '',
				begin: '',
				end: '',
				start_end:[],
				model:''
			},
			liudong      : true,
			loading:true,
			xuenianList:[],
			gradeList:[],
			classList:[],
			departmentsList:[],
			projectList:[
				{
					id: 0,
					name: "跑圈项目"
				}
			],
			high_weightWdata:[],
			high_weightHdata:[],
			high_weightX:[],
			weightData:[],
			weightDataX:[],
			weightManData:[],
			weightWomanData:[],
			analysisData:{},
			//各院系成绩合格率
			hegelvDataX:[],
			hegelvData:[],
			labelOption :{
				show: true,
				position: 'inside',
				formatter: '{c}',
				color:'#fff',
				rotate: 90
			},
			isall:'0',
			// 男生女生平均
			//男生女生平均
			man_levelProjectData:[],
			man_levelProjectX:[],
			woman_levelProjectData:[],
			woman_levelProjectX:[],
			yundongshichangData:[],
			yundongshichangDataX:[],
			// 	表格饿数据
			tableList: [
			],
			activeFactoryId:'',
			leidaData : [],
			leidaColor: ['#e9df3d', '#f79c19', '#21fcd6', '#08c8ff', '#df4131'],
			endSize:3,
			gauge_value:1,
			gauge_value2:1,
			gauge_value3:3
		}
	},
	computed:{
		//身高体重bim
		shengaoChartOption(){
			return {
				dataZoom: [
					{
						xAxisIndex: 0, //这里是从X轴的0刻度开始
						show: false, //是否显示滑动条，不影响使用
						type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
						startValue: 0, // 从头开始。
						endValue: this.endSize, // 一次性展示6个。
					}
				],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				grid:{
					top:'18%',
					left: '18%',
					right: '18%',
					bottom: '12%',
				},
				color:['#BA50FF','#FF6D00'],
				legend: {
					data: ['身高', '体重'],
					textStyle: {
						color: "rgba(249, 247, 247, 1)"
					},
					itemHeight: 7.5
				},
				xAxis: [
					{
						type: 'category',
						data: this.high_weightX,
						alignTicks: false,
						splitLine: { show: false },
						scale: false,
						axisLine: {
							lineStyle: { color: '#1449A1', width: 1, height: 1 } // x轴
						},
						axisLabel: { // 控制x轴文本
							show: true,
							interval: 0,
							rotate: 15,
							textStyle: { color: 'rgba(255, 255, 255, 1)', fontSize: 12 }
						},
					}
				],
				yAxis: [
					{
						type: 'value',
						name: '身高',
						min: 0,
						max: 250,
						interval: 50,
						axisLabel: {
							formatter: '{value} cm',
							color: "rgba(251, 248, 248, 1)"
						},
						axisLine: {
							lineStyle: { color: 'transparent', width: 1, height: 1 } // x轴
						},
						splitLine: {
							lineStyle: {
								type: "dashed"
							}
						}
					},
					{
						type: 'value',
						name: '体重',
						min: 0,
						max: 25,
						interval: 5,
						axisLabel: {
							formatter: '{value} kg',
							color: "rgba(251, 248, 248, 1)"
						},
						axisLine: {
							lineStyle: { color: 'transparent', width: 1, height: 1 } // x轴
						},
						splitLine: {
							lineStyle: {
								type: "dashed"
							}
						}
					}
				],
				series: [
					{
						name: '身高',
						type: 'bar',
						tooltip: {
							valueFormatter: function (value) {
								return value + ' ml';
							}
						},
						barWidth: 10,
						data:this.high_weightHdata,
						label: {
							show: true,
							position: 'top',
							color:"#00BFFF"
						},
						animationDelay: function (idx) {
							// 设置每个数据的动画延迟时间，实现动画效果
							return idx * 10;
						}
					},
					{
						name: '体重',
						type: 'bar',
						barWidth: 10,
						tooltip: {
							valueFormatter: function (value) {
								return value + ' ml';
							}
						},
						data:this.high_weightWdata,
						label: {
							show: true,
							position: 'top',
							color:"#00EE76"
						},
						animationDelay: function (idx) {
							// 设置每个数据的动画延迟时间，实现动画效果
							return idx * 10;
						}
					}
				]
			}
		},
		shengaopie(){
			return {
				grid:{
				},
				legend: {
					orient: 'vertical',
					x: 'right',               // 水平安放位置，默认为全图居中，可选为：
					y: '10%',
					borderColor: '#ccc',       // 图例边框颜色
					borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
					padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
					// 接受数组分别设定上右下左边距，同css
					itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
					// 横向布局时为水平间隔，纵向布局时为纵向间隔
					itemWidth: 20,             // 图例图形宽度
					itemHeight: 14,            // 图例图形高度
					textStyle: {
						color: '#fff'    // 图例文字颜色
					},
					data:this.weightDataX
				},
				color:['#11C0FF','#1886FF','#DCCA36','#F35945'],
				series: [
					{
						name: '',
						type: 'pie',
						radius: ['40%', '50%'],
						center: ['50%', '50%'],
						label: {
							alignTo: 'edge',
							formatter: '{name|{b}}\n{time|{c} %}',
							minMargin: 5,
							edgeDistance: 10,
							lineHeight: 15,
							rich: {
								time: {
									fontSize: 12,
									color: '#fff'
								},
								name: {
									fontSize: 16
								},
							}
						},
						labelLine: {
							length: 25,
							length2: 0,
							maxSurfaceAngle: 80
						},
						emphasis: {
							label: {
								show: true
							}
						},
						data: this.isall == '0'?this.weightData:(this.isall=='1'?this.weightManData:this.weightWomanData),
						
					}
				]
			}
		},
		// 学院合格率
		hegulvChartOption() {
			return {
				dataZoom: [
					{
						xAxisIndex: 0, //这里是从X轴的0刻度开始
						show: false, //是否显示滑动条，不影响使用
						type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
						startValue: 0, // 从头开始。
						endValue: this.endSize, // 一次性展示6个。
					}
				],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				color:['#FDC400','#41E3F6','#9641F6','#136094'],
				legend: {
					textStyle: {
						color: "rgba(249, 247, 247, 1)"
					},
					itemHeight: 10.5
				},
				grid: {
					top:'12%',
					left: '12%',
					right: '1%',
					bottom: '13%',
				},
				xAxis: [
					{
						type: 'category',
						data: this.hegelvDataX,
						// axisLine: {
						// 	lineStyle: { color: '', width:0, height: 1 } // x轴
						// },
						// axisLabel:{
						// 	fontSize:12,
						// 	interval: 0,
						// 	rotate: 30
						// },
						alignTicks: false,
						splitLine: { show: false },
						scale: false,
						axisLine: {
							lineStyle: { color: '#1449A1', width: 1, height: 1 } // x轴
						},
						axisLabel: { // 控制x轴文本
							show: true,
							interval: 0,
							rotate: 15,
							textStyle: { color: 'rgba(255, 255, 255, 1)', fontSize: 12 }
						},
					}
				],
				yAxis: [
					{
						type: 'value',
						alignTicks: false,
						axisLine: {
							lineStyle: { color: '#1449A1', width: 1, height: 1 } // y轴
						},
						splitLine: {
							show: false
						},
						axisLabel: { // 控制y轴文本
							show: true,
							textStyle: { color: 'rgba(255, 255, 255, 1)', fontSize: 12 }
						}
					}
				],
				series:this.hegelvData
			}
		},
		//  男生各项目平均分与等级
		manClassScoreData(){
			return {
				dataZoom: [
					{
						xAxisIndex: 0, //这里是从X轴的0刻度开始
						show: false, //是否显示滑动条，不影响使用
						type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
						startValue: 0, // 从头开始。
						endValue: this.endSize, // 一次性展示6个。
					}
				],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				color:["#00BFFF","#00EE76","#FFC125"],
				grid:{
					top:'22%',
					x2:50,
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				legend: {
					data: ['分数', '合格率', '优良率'],
					textStyle: {
						color: "rgba(249, 247, 247, 1)"
					},
					itemHeight: 7.5
				},
				xAxis: [
					{
						type: 'category',
						data: this.man_levelProjectX,
						axisPointer: {
							type: 'shadow'
						},
						axisLabel: {
							interval: 0,
							rotate: 30,
							fontSize:12,
							formatter: '{value}',
							color: "rgba(251, 248, 248, 1)"
						},
						axisLine: {
							lineStyle: { color: '#fff', width: 1, height: 1 } // x轴
						},
						splitLine: {
							lineStyle: {
								type: "dashed"
							}
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						name: '分数',
						min: 0,
						axisLabel: {
							formatter: '{value} 分',
							interval: 0,
							rotate: 30,
							fontSize:12,
							color: "rgba(251, 248, 248, 1)"
						},
						axisLine: {
							lineStyle: { color: '#fff', width: 1, height: 1 } // x轴
						},
						splitLine: {
							lineStyle: {
								type: "dashed"
							}
						}
					},
					{
						type: 'value',
						name: '比率',
						min: 0,
						max: 100,
						axisLabel: {
							formatter: '{value} %',
							interval: 0,
							rotate: 30,
							fontSize:12,
							color: "rgba(251, 248, 248, 1)"
						},
						axisLine: {
							lineStyle: { color: '#fff', width: 1, height: 1 } // x轴
						},
						splitLine: {
							lineStyle: {
								type: "dashed"
							}
						}
					}
				],
				series: [
					{
						name: '分数',
						type: 'bar',
						tooltip: {
							valueFormatter: function (value) {
								return value + ' 分';
							}
						},
						barWidth:10,
						data: this.man_levelProjectData[0],
						label: {
							show: true,
							position: 'top',
							color:"#00BFFF"
						}
					},
					{
						name: '合格率',
						type: 'line',
						barWidth:5,
						tooltip: {
							valueFormatter: function (value) {
								return value + ' 分';
							}
						},
						data: this.man_levelProjectData[1],
						label: {
							show: true,
							position: 'top',
							color:"#00EE76"
						}
					},
					{
						name: '优良率',
						type: 'line',
						yAxisIndex: 1,
						tooltip: {
							valueFormatter: function (value) {
								return value + ' %';
							}
						},
						data:this.man_levelProjectData[2],
						label: {
							show: true,
							position: 'top',
							color:"#FFC125"
						}
					}
				]
			};
		},
		//   女生各项目平均分与等级
		womanClassScoreData(){
			return {
				dataZoom: [
					{
						xAxisIndex: 0, //这里是从X轴的0刻度开始
						show: false, //是否显示滑动条，不影响使用
						type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
						startValue: 0, // 从头开始。
						endValue: this.endSize, // 一次性展示6个。
					}
				],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				grid:{
					top:'22%',
					x2:50,
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				color:["#00BFFF","#00EE76","#FFC125"],
				legend: {
					data: ['分数', '合格率', '优良率'],
					textStyle: {
						color: "rgba(249, 247, 247, 1)"
					},
					itemHeight: 7.5
				},
				xAxis: [
					{
						type: 'category',
						data: this.woman_levelProjectX,
						axisPointer: {
							type: 'shadow'
						},
						axisLabel: {
							interval: 0,
							rotate: 30,
							fontSize:12,
							formatter: '{value}',
							color: "rgba(251, 248, 248, 1)"
						},
						axisLine: {
							lineStyle: { color: '#fff', width: 1, height: 1 } // x轴
						},
						splitLine: {
							lineStyle: {
								type: "dashed"
							}
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						name: '分数',
						min: 0,
						axisLabel: {
							formatter: '{value} 分',
							interval: 0,
							rotate: 30,
							fontSize:12,
							color: "rgba(251, 248, 248, 1)"
						},
						axisLine: {
							lineStyle: { color: '#fff', width: 1, height: 1 } // x轴
						},
						splitLine: {
							lineStyle: {
								type: "dashed"
							}
						}
					},
					{
						type: 'value',
						name: '比率',
						min: 0,
						max: 100,
						axisLabel: {
							formatter: '{value} %',
							interval: 0,
							rotate: 30,
							fontSize:12,
							color: "rgba(251, 248, 248, 1)"
						},
						axisLine: {
							lineStyle: { color: '#fff', width: 1, height: 1 } // x轴
						},
						splitLine: {
							lineStyle: {
								type: "dashed"
							}
						}
					}
				],
				series: [
					{
						name: '分数',
						type: 'bar',
						tooltip: {
							valueFormatter: function (value) {
								return value + ' 分';
							}
						},
						barWidth:20,
						data: this.woman_levelProjectData[0],
						label: {
							show: true,
							position: 'top',
							color:"#00BFFF"
						}
					},
					{
						name: '合格率',
						type: 'line',
						barWidth:20,
						tooltip: {
							valueFormatter: function (value) {
								return value + ' 分';
							}
						},
						data: this.woman_levelProjectData[1],
						label: {
							show: true,
							position: 'top',
							color:"#00EE76"
						}
					},
					{
						name: '优良率',
						type: 'line',
						yAxisIndex: 1,
						tooltip: {
							valueFormatter: function (value) {
								return value + ' %';
							}
						},
						data:this.woman_levelProjectData[2],
						label: {
							show: true,
							position: 'top',
							color:"#FFC125"
						}
					}
				]
			};
		},
		//运动时长
		yundongShichang(){
			return{
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c}h"
				},
				legend: {
					pageTextStyle: {
						color: "rgba(235, 230, 230, 1)"
					},
					x: 'center',
					y: '15%',
					data:this.yundongshichangDataX,
					icon: 'circle',
					textStyle: {
						color: '#fff',
					}
				},
				calculable: true,
				series: [{
					name: '',
					type: 'pie',
					//起始角度，支持范围[0, 360]
					startAngle: 0,
					//饼图的半径，数组的第一项是内半径，第二项是外半径
					radius: [41, 100.75],
					//支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
					center: ['50%', '40%'],
					//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
					// 'radius' 面积展现数据的百分比，半径展现数据的大小。
					//  'area' 所有扇区面积相同，仅通过半径展现数据大小
					roseType: 'area',
					//是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
					avoidLabelOverlap: false,
					label: {
						normal: {
							show: true,
							formatter: '{c}h'
						},
						emphasis: {
							show: true
						}
					},
					labelLine: {
						normal: {
							show: true,
							length2: 1,
						},
						emphasis: {
							show: true
						}
					},
					data: this.yundongshichangData
				}
				]
			};
		},
		// 参与率
		canyulvChartData(){
			return {
				color: ['#015EEA', '#00C0FA'],
				radar: {
					center: ["50%", "50%"],//偏移位置
					radius: "80%",
					startAngle: 40, // 起始角度
					splitNumber: 4,
					shape: "circle",
					splitArea: {
						areaStyle: {
							color: 'transparent'
						}
					},
					axisLabel: {
						show: false,
						fontSize: 20,
						color: "#00E4FF",
						fontStyle: "normal",
						fontWeight: "normal"
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.5)"
						}
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.5)"
						}
					},
					indicator: this.getIndicator()
				},
				series: [{
					type: "radar",
					data: this.getRenderData()
				}]
			}
		},
		//实时监测
		yuanxiyouxiulv(){
			return{
				title: {
					x: "center",
					bottom: 0,
					text:this.gauge_value,
					subtext: '院系优秀率',
					textStyle: {
						fontWeight: 'normal',
						fontSize: 18,
						color: "#fff"
					},
				},
				tooltip: {
					show: true,
				},
				series: [
					{
						type: 'gauge',
						axisLine: {
							show: true,
							lineStyle: {
								width: 4,
								shadowBlur: 0,
								color: [
									[0.3, '#67e0e3'],
									[0.7, '#37a2da'],
									[1, '#fd666d']
								]
							}
						},
						radius:'60%',
						center: ['50%', '55%'],
						splitNumber: 10, //刻度数量
						min: 0,
						max:100,
						startAngle: 225,
						endAngle: -45,
						axisTick: {
							show: false,
							lineStyle: {
								color: "rgba(255,255,255,.1)",
								width: 1
							},
							length: -5,
							splitNumber: 7
						},
						splitLine: {
							show: true,
							length: -5,
							lineStyle: {
								color: "rgba(255,255,255,.2)",
							}
						},
						axisLabel: {
							distance: -15,
							textStyle: {
								fontSize: 10,
								color: "rgba(255,255,255,.6)",
							}
							
						},
						pointer: { //仪表盘指针
							show: 0
						},
						detail: {
							show: false
						},
						data: [{
							name: "",
							value: 100
						}]
					} ,
					
					{
						name: '风向',
						type: 'gauge',
						startAngle: 225,
						endAngle: -45,
						radius: '56%',
						center: ['50%', '55%'], // 默认全局居中
						
						min: 0,
						max: 100,
						
						axisLine: {
							show: false,
							lineStyle: {
								width:5,
								shadowBlur: 0,
								color: [
									
									[1, '#ff7109']
								]
							}
						},
						axisTick: {
							show: false,
							
						},
						splitLine: {
							show: false,
							length: 20,
							
						},
						
						axisLabel: {
							show:false
						},
						pointer: {
							show: true,
							length: '65%',
							width: 4
						},
						detail: {
							show:false,
							offsetCenter: [0, 0],
							textStyle: {
								fontSize: 10
							}
						},
						itemStyle: {
							normal: {
								color: "#ff7109",
								
							}
						},
						data: [{
							name: "",
							value: Math.floor(this.gauge_value)
						}]
					}]
			};
		},
		yuanxilianghaolv(){
			return{
				title: {
					x: "center",
					bottom: 0,
					text:this.gauge_value2,
					subtext: '院系良好率',
					textStyle: {
						fontWeight: 'normal',
						fontSize: 18,
						color: "#fff"
					},
				},
				tooltip: {
					show: true,
					
					
				},
				series: [
					{
						type: 'gauge',
						axisLine: {
							show: true,
							lineStyle: {
								width: 4,
								shadowBlur: 0,
								color: [
									[0.3, '#67e0e3'],
									[0.7, '#37a2da'],
									[1, '#fd666d']
								]
							}
						},
						radius:'60%',
						center: ['50%', '55%'],
						splitNumber: 10, //刻度数量
						min: 0,
						max:100,
						startAngle: 225,
						endAngle: -45,
						axisTick: {
							show: false,
							lineStyle: {
								color: "rgba(255,255,255,.1)",
								width: 1
							},
							length: -5,
							splitNumber: 7
						},
						splitLine: {
							show: true,
							length: -5,
							lineStyle: {
								color: "rgba(255,255,255,.2)",
							}
						},
						axisLabel: {
							distance: -15,
							textStyle: {
								fontSize: 10,
								color: "rgba(255,255,255,.6)",
							}
							
						},
						pointer: { //仪表盘指针
							show: 0
						},
						detail: {
							show: false
						},
						data: [{
							name: "",
							value: 100
						}]
					} ,
					
					{
						name: '院系良好率',
						type: 'gauge',
						startAngle: 225,
						endAngle: -45,
						radius: '56%',
						center: ['50%', '55%'], // 默认全局居中
						
						min: 0,
						max: 100,
						
						axisLine: {
							show: false,
							lineStyle: {
								width:5,
								shadowBlur: 0,
								color: [
									
									[1, '#ff7109']
								]
							}
						},
						axisTick: {
							show: false,
							
						},
						splitLine: {
							show: false,
							length: 20,
							
						},
						
						axisLabel: {
							show:false
						},
						pointer: {
							show: true,
							length: '65%',
							width: 4
						},
						detail: {
							show:false,
							offsetCenter: [0, 0],
							textStyle: {
								fontSize: 10
							}
						},
						itemStyle: {
							normal: {
								color: "#ff7109",
								
							}
						},
						data: [{
							name: "",
							value: Math.floor(this.gauge_value2)
						}]
					}]
			};
		},
		yuanxihegelv(){
			return{
				title: {
					x: "center",
					bottom: 0,
					text:this.gauge_value3,
					subtext: '院系合格率',
					textStyle: {
						fontWeight: 'normal',
						fontSize: 18,
						color: "#fff"
					},
				},
				tooltip: {
					show: true,
					
					
				},
				series: [
					{
						type: 'gauge',
						axisLine: {
							show: true,
							lineStyle: {
								width: 4,
								shadowBlur: 0,
								color: [
									[0.3, '#67e0e3'],
									[0.7, '#37a2da'],
									[1, '#fd666d']
								]
							}
						},
						radius:'60%',
						center: ['50%', '55%'],
						splitNumber: 10, //刻度数量
						min: 0,
						max:100,
						startAngle: 225,
						endAngle: -45,
						axisTick: {
							show: false,
							lineStyle: {
								color: "rgba(255,255,255,.1)",
								width: 1
							},
							length: -5,
							splitNumber: 7
						},
						splitLine: {
							show: true,
							length: -5,
							lineStyle: {
								color: "rgba(255,255,255,.2)",
							}
						},
						axisLabel: {
							distance: -15,
							textStyle: {
								fontSize: 10,
								color: "rgba(255,255,255,.6)",
							}
							
						},
						pointer: { //仪表盘指针
							show: 0
						},
						detail: {
							show: false
						},
						data: [{
							name: "",
							value: 100
						}]
					} ,
					
					{
						name: '风向',
						type: 'gauge',
						startAngle: 225,
						endAngle: -45,
						radius: '56%',
						center: ['50%', '55%'], // 默认全局居中
						
						min: 0,
						max: 100,
						
						axisLine: {
							show: false,
							lineStyle: {
								width:5,
								shadowBlur: 0,
								color: [
									
									[1, '#ff7109']
								]
							}
						},
						axisTick: {
							show: false,
							
						},
						splitLine: {
							show: false,
							length: 20,
							
						},
						
						axisLabel: {
							show:false
						},
						pointer: {
							show: true,
							length: '65%',
							width: 4
						},
						detail: {
							show:false,
							offsetCenter: [0, 0],
							textStyle: {
								fontSize: 10
							}
						},
						itemStyle: {
							normal: {
								color: "#ff7109",
								
							}
						},
						data: [{
							name: "",
							value: Math.floor(this.gauge_value3)
						}]
					}]
			};
		}
	},
	created() {
		this.canFullScreen = document.fullscreenEnabled ||
			document.webkitFullscreenEnabled ||
			document.mozFullScreenEnabled ||
			document.msFullscreenEnabled
		if (document.webkitFullscreenEnabled) {
			this.browserKernel = 'webkit'
		} else if (document.mozFullScreenEnabled) {
			this.browserKernel = 'gecko'
		} else if (document.msFullscreenEnabled) {
			this.browserKernel = 'trident'
		} else if (document.fullscreenEnabled) {
			this.browserKernel = 'others'
		}
		if (this.canFullScreen) {
			this.addFullScreenListener()
		}
		let ones = Math.random(1,10);
		this.activeFactoryId = String(ones);
	},
	mounted() {
		
		this.getGradeList();
		this.getDepartmentsList();
		this.getProjectsList();
		this.getChartData();
	},
	methods: {
		getIndicator(){
			var max = this.leidaData[0].value;
			this.leidaData.forEach(function(d) {
				max = d.value > max ? d.value : max;
			});
			var indicator = [];
			this.leidaData.forEach(function(d) {
				indicator.push({
					name: d.name,
					max: max,
					color: '#fff'
				})
			})
			return indicator
		},
		getRenderData(){
			var that = this;
			var max = that.leidaData[0].value;
			this.leidaData.forEach(function(d) {
				max = d.value > max ? d.value : max;
			});
			var renderData = [{
				value: [],
				symbol: 'none',
				lineStyle: {
					normal: {
						color: '#00E4FF',
						width: 2
					}
				},
				
				areaStyle: {color: "#015EEA"}
			}];
			
			that.leidaData.forEach(function(d, i) {
				var value = ['', '', '', '', ''];
				value[i] = max,
					renderData[0].value[i] = d.value;
				renderData.push({
					value: value,
					symbol: 'circle',
					symbolSize: 12,
					lineStyle: {
						normal: {
							color: 'transparent'
						}
					},
					label: {
						show: true,
						formatter: function (params) {
							return params.value;
						},
						color: that.leidaColor[i]
					},
					itemStyle: {
						normal: {
							color: that.leidaColor[i],
						}
					}
				})
			})
			return renderData
		},
		tianchongTable(addLength){
			console.log("===tianchongTable",addLength)
			for (var i = 0; i < addLength; i++) {
				this.tableList.push({
					index: "-",
					realname: "-",
					testerNumber: "-",
					score: "-",
					projectName: "-",
					clazz: "-",
					departName: "-",
					grade: "-"
				});
			}
		},
		/**
		 * 获取项目列表
		 */
		getProjectsList() {
			getProjectsList({mtype:2}).then(res => {
				if (res.code === 0) {
					this.projectList =[...this.projectList,...res.data];
				} else {
					this.$message.error(res.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		/**
		 * 获取年级列表
		 */
		getGradeList() {
			getGradesList().then(res => {
				if (res.code === 0) {
					this.gradeList = res.data;
				} else {
					this.$message.error(res.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		/**
		 * 获取院系列表
		 */
		getDepartmentsList() {
			getDepartmentsList({type: this.schoolForm.type}).then(res => {
				if (res.code === 0) {
					this.departmentsList = res.data;
				} else {
					this.$message.error(res.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		getSaishi() {
			getSaishi().then(res => {
				if (res.code === 0) {
					this.xuenianList = res.data;
				} else {
					this.$message.error(res.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		/* 获取基本的chart 数据 */
		getChartData(){
			let params = {
				...this.schoolForm,
			}
			this.loading = true;
			getChartData(params).then(res => {
				console.log("=====res",res)
				if (res.code === 0) {
					// this.loading = false;
					this.analysisData = res.data;
					this.leidaData = this.analysisData.canyulv.data
					this.tableList = this.analysisData.match
					this.gauge_value = parseFloat(this.analysisData.youxiulv.replace(/%/g, ''));
					this.gauge_value2 = parseFloat(this.analysisData.lianghaolv.replace(/%/g, ''));
					this.gauge_value3 = parseFloat(this.analysisData.hegelv.replace(/%/g, ''));
					//   获取学院数据
					this.getxueYuanData();
					// 获取合格率数据
					this.gethegelvData();
				}
				this.loading = false;
			}).catch(e => {
				// this.$message.error(e.message);
			});
		},
		changenannv(type){
			this.isall = type;
		},
		/**
		 * 处理合格率数据
		 * **/
		gethegelvData(){
			this.analysisData.hegedlv.series.map(item=>{
				item.label = this.labelOption
				let data = []
				item.data.map(items=>{
					data.push(Number(items.slice(0,items.length-1)));
				})
				item.data = data;
				item.barWidth = 20;
			})
			this.hegelvDataX = this.analysisData.hegedlv.data
			this.hegelvData = this.analysisData.hegedlv.series
		},
		/* 学院 */
		getxueYuanData() {
			let yundongshichang = JSON.parse(JSON.stringify(this.analysisData.yundongshichang));
			let yundongshichangX = [];
			for(let i = 0; i< yundongshichang.length-1;i++){
				let objs = {
					value    : 0,
					name     : "",
					itemStyle: {
						normal: {
							color: 'transparent'
						}
					}
				}
				yundongshichangX.push(yundongshichang[i].name)
				this.analysisData.yundongshichang.push(objs)
			}
			this.yundongshichangData = this.analysisData.yundongshichang;
			this.yundongshichangDataX = yundongshichangX;
			this.man_levelProjectData = this.analysisData.man_level.data;
			this.woman_levelProjectData = this.analysisData.woman_level.data;
			this.man_levelProjectX = this.analysisData.man_level.project;
			this.woman_levelProjectX = this.analysisData.woman_level.project;
			this.high_weightWdata = this.analysisData.high_weight.weight;
			this.high_weightHdata = this.analysisData.high_weight.high;
			this.high_weightX = this.analysisData.high_weight.xueyuan;
			let arr = [];
			let arrx = [];
			this.analysisData.weight.map((item)=>{
				let obj = {
					"value": item.value,
					"name": item.name,
					itemStyle: {
						opacity: 0.7,
						margin:10,
						borderRadius: 15
					}
				}
				arr.push(obj)
				arrx.push(obj.name)
			});
			let arr2 = []
			this.analysisData.weight_man.map((item)=>{
				let obj = {
					"value": item.value,
					"name": item.name,
					itemStyle: {
						opacity: 0.7,
						margin:10,
						borderRadius: 15
					}
				}
				arr2.push(obj)
			});
			let arr3 = []
			this.analysisData.weight_woman.map((item)=>{
				let obj = {
					"value": item.value,
					"name": item.name,
					itemStyle: {
						opacity: 0.7,
						margin:10,
						borderRadius: 15
					}
				}
				arr3.push(obj)
			});
			this.weightData = arr;
			this.weightManData = arr2;
			this.weightWomanData = arr3;
			this.weightDataX = arrx;
		},
		/**
		 * 图表选择院系
		 * **/
		changeYuanxi(e,type){
			switch (type) {
				case 'canyulv':
					console.log("====",e)
					this.canyulvDepartmentsId= e
					this.departmentsList.forEach((item)=>{
						if(item.id == e){
							this.canyulvDepartments = item.name
						}
					})
					this.$refs.visitxiangmucanyulvChart.resize();
					this.getChartData();
					break;
				case 'yundong':
					console.log("====",e)
					this.yundongDepartmentsId= e
					this.departmentsList.forEach((item)=>{
						if(item.id == e){
							this.yundongDepartments = item.name
						}
					})
					this.$refs.visityundongChart.resize();
					this.getChartData();
					break;
				case 'man':
					console.log("====",e)
					this.manDepartmentsId= e
					this.departmentsList.forEach((item)=>{
						if(item.id == e){
							this.manDepartments = item.name
						}
					})
					this.$refs.visitmanChart.resize();
					this.getChartData();
					break;
				case 'woman':
					console.log("====",e)
					this.womanDepartmentsId= e
					this.departmentsList.forEach((item)=>{
						if(item.id == e){
							this.womanDepartments = item.name
						}
					})
					this.$refs.visitwomanChart.resize();
					this.getChartData();
					break;
				case 'tizhong':
					console.log("====",e)
					this.tizhongDepartmentsId= e
					this.departmentsList.forEach((item)=>{
						if(item.id == e){
							this.tizhongDepartments = item.name
						}
					})
					this.$refs.visittizhongChart.resize();
					this.$refs.visittizhongpieChart.resize();
					this.getChartData();
					break;
				
				default:
					break
			}
		},
		// 全屏
		toggleFullScreen() {
			if (this.canFullScreen) {
				if (this.isFullScreen) {
					// 关闭全屏
					this.isFullScreen = false
					console.log("=======this.canFullScreen", this.isFullScreen)
					this.exitFullScreen()
				} else {
					// 打开全屏
					this.isFullScreen = true
					// console.log("=======this.canFullScreen",this.isFullScreen)
					this.requestFullScreen(document.body)
				}
			} else {
				this.$message({
					message: '当前浏览器暂不支持全屏模式，请切换浏览器后重新尝试！',
					type   : 'warning'
				});
			}
		},
		requestFullScreen(element) {
			// 判断各种浏览器，找到正确的方法
			const requestMethod = element.requestFullScreen || // W3C
				element.webkitRequestFullScreen || // Chrome, safari
				element.mozRequestFullScreen || // FireFox
				element.msRequestFullscreen // IE11
			if (requestMethod) {
				requestMethod.call(document.getElementById('main-content'))
			}
		},
		exitFullScreen() {
			var exitMethod = document.exitFullscreen || // W3C
				document.mozCancelFullScreen || // FireFox
				document.webkitExitFullscreen || // Chrome等
				document.msExitFullscreen // IE11
			if (exitMethod) {
				exitMethod.call(document)
			}
			this.weightDataX = []
			this.getChartData()
		},
		addFullScreenListener() {
			const self         = this
			document.onkeydown = function (e) {
				if (e && e.keyCode === 122) { // 捕捉F11键盘动作
					e.preventDefault() // 阻止F11默认动作
					self.toggleFullScreen()
				}
			}
			// 监听不同浏览器的全屏事件，并件执行相应的代码
			switch (self.browserKernel) {
				case 'webkit':
					document.onwebkitfullscreenchange = function () {
						if (document.webkitIsFullScreen) {
							self.isFullScreen = true
						} else {
							self.isFullScreen = false
						}
					}
					break
				case 'gecko':
					document.onmozfullscreenchange = function () {
						if (document.mozFullScreen) {
							self.isFullScreen = true
						} else {
							self.isFullScreen = false
						}
					}
					break
				case 'trident':
					document.onmsfullscreenchange = function () {
						if (document.msFullscreenElement) {
							self.isFullScreen = true
						} else {
							self.isFullScreen = false
						}
					}
					break
				case 'others':
					document.onfullscreenchange = function () {
						if (document.fullscreen) {
							self.isFullScreen = true
						} else {
							self.isFullScreen = false
						}
					}
					break
				default:
					break
			}
		},
	}
}
</script>

<style scoped lang="scss">
.paiming_title{
	font-size: 20px;
	margin-right: 2%;
	font-weight: 500;
	color: #FFF;
	
	background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.app-container {
	padding: 0 1%;
	width: 100%;
	height: calc(100vh - 0px);
	overflow-y: hidden;
	overflow-x: hidden;
	.top-title {
		font-size: 34px;
		width: 100%;
		text-align: center;
		padding: 6px 0;
		
		.top-name {
			font-family: shishang_teshu;
			font-weight: 500;
			color: #FFFFFF;
			background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	.top-title1{
		position:absolute;
		top:4px;
		height: 55px;
		width: 99%;
	}
	.top-tag {
		margin-top: 20px;
		.grid-content {
			color: #fff;
			min-height: 80px;
			border-radius: 8x;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 0 4%;
			background: url(../../../src/assets/images/fangkuang.png) no-repeat center;
			background-size: 100%;
			
			.tag-name {
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				font-size: 20%;
				color: #eee;
				padding-bottom: 4%;
			}
			
			.tag-line {
				width: 86%;
				height: 1px;
				border: 1px solid #00FFFD;
				position: relative;
				
				.tag-point {
					width: 4px;
					height: 4px;
					background: #00FFFD;
					border-radius: 50%;
					position: absolute;
					right: -4px;
					top: -2px;
				}
			}
			
			.tag-num {
				padding-top: 2%;
				font-size: 120%;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #08C7F1;
			}
			.tag-subtitle{
				color:#08ACF1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				font-size: 5%;
			}
			
		}
		
		.grid-content2 {
			background: url(../../../src/assets/images/fangkuang3@3x.png) no-repeat center;
			background-size: 100%;
		}
		
		.grid-content1 {
			background: url(../../../src/assets/images/fangkuang3@3x.png) no-repeat center;
			background-size: 100%;
		}
	}
	
	.top-row {
		min-height: 22.8vh;
		display: flex;
		flex-direction: column;
		
		.top-col {
			margin-bottom: 1%;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
		
		.top-row-content {
			padding: 0 2%;
			flex: 1;
			height: 25.8vh;
			.content-chart {
				height: 93%;
			}
			
			.content-name {
				height: 3.6vh;
				.content-name-s {
					display: flex;
					align-items: center;
					height: 100%;
					font-family: shishang_teshu;
					color: #FFFFFF;
					letter-spacing: 4px;
					font-size: 1%;
					text-indent: 16px;
					background: linear-gradient(180deg, #EEEEEE 0%, #00FFFC 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					text-wrap: nowrap;
				}
				
			}
			
			.content-xiangqing {
				padding: 6%;
				height: 62%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: column;
				
				.project-name {
					font-weight: 400;
					color: #00FFFD;
					font-size: 12%;
				}
				
				.fenge {
					width: 100%;
					height: 2%;
				}
				
				.jinzhan {
					font-size: 12%;
					color: #00FFFD;
				}
				
				.bg-bottom {
					font-size: 12%;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.jinzhans {
						padding: 2%;
						background: linear-gradient(180deg, rgba(1, 125, 125, 0) 0%, rgba(17, 76, 86, 0) 0%, rgba(11, 95, 101, 0.5) 100%);
						box-shadow: inset 0px 1px 6px 0px #00B6C7;
						border: 1px solid #00DDE0;
						color: #56FEFE;
						border-radius: 10px;
						position: relative;
						
						&:after {
							content: ">>>";
							position: absolute;
							color: #56FEFE;
							top: 24%;
							right: -63%;
						}
						
						&:last-child:after {
							display: none;
						}
					}
				}
			}
			
			.content-all {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				padding: 6%;
				height: 90%;
				
				.content-item {
					width: 48%;
					height: 45%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.item-img {
						width: 30%;
						
						img {
							width: 100%;
							height: 100%;
						}
					}
					
					.item-title {
						width: 70%;
						font-size: 2%;
						color: #00FFFD;
						margin-left: 3%;
						text-wrap: nowrap;
					}
				}
			}
			
			.content-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
				
				.content-list-item {
					background: linear-gradient(180deg, rgba(0, 33, 57, 0) 0%, #018791 100%);
					border-radius: 0px 0px 16px 16px;
					display: flex;
					justify-content: space-around;
					align-items: center;
					
					.item-img {
						width: 20%;
						
						img {
							width: 100%;
							height: 100%;
						}
					}
					
					.item-title {
						width: 77%;
						font-size: 2%;
						color: #00FFFD;
						margin-left: 1%;
						text-wrap: nowrap;
					}
				}
			}
		}
		
		.top-row-content-teshu {
			.content-chart {
				padding: 2%;
				height: 85%;
			}
		}
		
		.top-row-content-two {
			//background: #999999;
			height: 26.8vh;
			
			.content-name {
				height: 3.6vh;
				
				.content-name-s {
					display: flex;
					align-items: center;
					height: 100%;
					font-family: shishang_teshu;
					color: #FFFFFF;
					letter-spacing: 4px;
					font-size: 14px;
					text-indent: 20px;
					background: linear-gradient(180deg, #EEEEEE 0%, #00FFFC 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			
		}
		
		.top-row-content-two-teshu-small {
			height: 23.9vh;
			.content-chart {
				padding: 1%;
				height: 100%;
			}
		}
		
		.top-row-content-two-teshu {
			height: 20.8vh;
			.content-chart {
				height: 100%;
			}
			.top-row{
				min-height: 18.8vh;
			}
		}
		
		.top-col {
			height: 100%;
		}
	}
	.top-row-shang{
		margin-top: -20px!important;
	}
	.top-row-shang2{
		margin-top: 5px!important;
	}
}

@-webkit-keyframes spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin1 {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes spin2 {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes spin3 {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}
.xuanzhuan {
	-webkit-animation: spin1 5s linear 5s 5 alternate;
	animation: spin1 5s linear infinite;
}
.xuanzhuan2 {
	-webkit-animation: spin2 5s linear 5s 5 alternate;
	animation: spin2 5s linear infinite;
}
.xuanzhuan3 {
	-webkit-animation: spin3 5s linear 5s 5 alternate;
	animation: spin3 5s linear infinite;
}
@keyframes change1 {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

@keyframes change2 {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

@keyframes change3 {
	0% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.9;
	}
}

.xiaoshi5 {
	-webkit-animation: change3 9s linear 5s 5 alternate;
	animation: change2 9s linear infinite;
}

.xiaoshi10 {
	-webkit-animation: change1 9s linear 5s 5 alternate;
	animation: change1 9s linear infinite;
}

.xiaoshi13 {
	-webkit-animation: change2 9s linear 5s 5 alternate;
	animation: change2 9s linear infinite;
}
.xiaoshi14 {
	-webkit-animation: change3 9s linear 5s 5 alternate;
	animation: change1 9s linear infinite;
}
/deep/ .el-input__inner{
	width: 100px!important;
	background: rgba(24,42,82,0.6)!important;
	color: #fff!important;
}
/deep/ .el-select-dropdown{
	background-color: rgba(24,42,82,0.6)!important;
}
/deep/ .el-form-item{
	margin-bottom: 0!important;
}
/deep/ .el-form-item__label{
	color: #fff;
}
/deep/ .el-button--primary{
	background: transparent!important;
	border-color:#03BFF2 ;
	box-shadow: 0px 1px 14px #03BFF2;
}
/deep/ .el-button{
	background: transparent!important;
	border-color:#03BFF2 ;
}
.tianqi{
	position: absolute;
	top: 5vh;
	right: 9vw;
}
</style>
